Overview

Introductions

Class Topics

Basics

Outline

What is Internet Mapping

Extended Desktop Mapping

Use of open standards based remote data and map services in desktop applications

Geospatial Data Sharing

Establishing open standards based services to share geospatial data and mapping capabilities over the Internet

Web-client Mapping

The delivery of mapping and geospatial data tools through web browsers, again based upon open standards

Definitions

Internet

The global computer network of computers that typically connect with each other over TCP/IP

World Wide Web

The subset of applications that are run over the Internet, typically using the HTTP protocol in combination with data (HTML, XML, XHTML), presentation (CSS), and behavior (JavaScript) components

Mapping

The generation of cartographic products that include map images (pictures of geospatial data) and other elements (e.g. legends, tools, scale information, north-arrow)

Analysis

The development of models (statistical and otherwise) that enable the exploration of geospatial data and testing of hypotheses using those data

Open Standards

While the definition varies from one organization to the next, Open Standards are often characterized by the following:

Interoperability

Ability of systems to share data and information with each other

COTS

Commercial Off-the-Shelf Software. Applications that are “purchased” from vendors, often with license terms that restrict the use the software to the specific platform for which it is licensed. Often comes with implicit or explicit technical support

Open Source

Software licensed under terms that are consistent with the Open Source definition, which includes access to source code, and freedom to modify and redistribute

Data

Actual values associated with geographic locations. For example - numeric elevation values associated with locations within a Digital Elevation Model.

Metadata

Data about a particular data product or service. Metadata provide critical documentation that supports the discovery and use of data products and data and mapping services

Tools

Computer Hardware Requirements

Software Requirements

Overview

Web Development

Parts of a Web Page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<html>
    <!-- The HTML block is the container for all of your page content -->
    <head>
        <!-- The head is where you include pointers to external resources 
        (i.e. style sheets and javascript files), blocks of Javascript code
        , styles, etc.  -->
        <title>The page title also goes in here</title>
    </head>
    <body>
        <!-- The body is where you put all of the content for the page 
        (i.e. the material that will be displayed in the web browser)  -->
        <h1>Headers</h1>
        <div>Generic blocks of content</div>
        <p>Paragraphs</p>
        <table>Tables</table>
        <img ...>Images</img>
        <form ...>Forms</form>
        <ul>Unordered Lists</ul>
        <ol>Ordered Lists</ol>
        <li>List Items</li>
        
        <!-- Javascript can go here as well -->
    </body>
</html>

Link to example

Web Site Components - Structure

Content is defined in terms of the structural elements available in HTML/XHTML

Web Site Components - Presentation

Modifications to default rendering of HTML/XHTML elements are made through styles defined in CSS

CSS Selectors

Selectors may be based on several criteria

Web Site Components - Behavior

The most interoperable language for adding dynamic behavior to web sites is Javascript - supported by most browsers on most operating systems

Simple Web Page

1
2
3
4
5
6
7
8
9
10
11

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>This is a simple web page</title>
    </head>
    <body>
        <h1>They don't get any simpler than this!</h1>
        <p>OK, not much simpler than this.</p>
        <p>Hello World?</p>
    </body>
</html>

link to example

Simple Web Page with CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>This is a simple web page - with styling</title>
        <style type="text/css">
            h1 {color:blue; font-size:large}
            p.para {color:#777777; font-size:small}
            #annoying {color:red; text-decoration:line-through}
        </style>
    </head>
    <body>
        <h1>They don't get any simpler than this!</h1>
        <p class="para">OK, not much simpler than this.</p>
        <p id="annoying" class="para">Hello World?</p>
    </body>
</html>

link to example

Simple Web Page with Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>This is a simple web page with Javascript</title>
        <script type="text/javascript">
            function genericAlert() {
                alert("You just did something ...")
                document.getElementById("clickMe").style.color = "red"
            }
        </script>
    </head>
    <body>
        <h1>They don't get any simpler than this!</h1>
        <p>OK, not much simpler than this.</p>
        <p>Hello World?</p>
        <p id="clickMe" onclick="genericAlert();">What happens when you click me?</p>
    </body>
</html>

link to example

More Complete Web Page Example

NAWRS Mapper. HTML: 39 Lines; CSS: 136 Lines; core.js: 515 Lines + Google Maps API and JQuery Framework

NAWRS Mapper. HTML: 39 Lines; CSS: 136 Lines; core.js: 515 Lines + Google Maps API and JQuery Framework

Outline

What is an API

An Application Programming Interface (API) is a particular set of rules and specifications that a software program can follow to access and make use of the services and resources provided by another particular software program that implements that API. It serves as an interface between different software programs and facilitates their interaction, similar to the way the user interface facilitates interaction between humans and computers. -- From Wikipedia: http://en.wikipedia.org/wiki/Api

Google Maps API Version

Reference Information

Google Maps API Family
http://code.google.com/apis/maps/
Javascript API Home Page
https://developers.google.com/maps/documentation/javascript/?csw=1
Javascript API v3 Tutorial Page
http://code.google.com/apis/maps/documentation/javascript/tutorial.html

Key Components

Types (required)
ROADMAP
SATELLITE
HYBRID
TERRAIN
Latitude and Longitude (required)
specification of where the map should initially be centered
Zoom Level (required)
0=global, higher values increasingly local. Limited by map type

Controls

Overlays

Overlay Types documentation

Marker
points depicted by specified or defined icons at locations within the map (reference)
Polyline
linear features defined by multiple points with a defined style for the line (reference)
Polygon
closed features defined by multiple points. Supports multi-polygons, and donuts. Line and fill styles may be specified. (reference)
(Ground) Overlay Maps
Image-based map layers that replace or overlay Google layers - registered to the map coordinates (reference)
Info Windows
floating content windows for displaying content defined as HTML, a DOM element, or text string (reference)
Layers
Grouped display content assigned to a specific layer type: Data (including GeoJSON), KmlLayer (& GeoRSS), Heatmap, FusionTablesLayer, TrafficLayer, TransitLayer, BicyclingLayer (reference)
Custom Overlays
definition of programmatically controlled layers (reference)

Services

Events

Examples

Simple - Roadmap

gmaps01.html preview 

Simple - Roadmap Code

gmaps01.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_01.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
        </script>
    </body>
</html>

mapPage.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/* You must set the height of either the 'html' or 'body' elements for some 
    browsers to properly render the map with a hight taller than 0px */
html { 
    height: 100% }

body { 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
    background-color: black; 
    color: #CCCCCC;
    text-align: center}
    
#map_canvas { 
    width:90%; 
    height:80%; 
    margin-left:auto; 
    margin-right: auto }
    
.infoBox { 
    color:black }

mapPage_01.js

1
2
3
4
5
6
7
8
9
10
11
12

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var mapOptions = {
        zoom: 8,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        mapOptions);
}

Simple - Satellite

gmaps02.html preview 

Simple - Satellite Code

gmaps02.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_02.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
        </script>
    </body>
</html>

mapPage_02.js

1
2
3
4
5
6
7
8
9
10
11
12

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var mapOptions = {
        zoom: 8,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        mapOptions);
}

Simple - Hybrid

gmaps03.html preview 

Simple - Hybrid Code

gmaps03.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_03.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
        </script>
    </body>
</html>

mapPage_03.js

1
2
3
4
5
6
7
8
9
10
11
12

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var mapOptions = {
        zoom: 8,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        mapOptions);
}

Simple - Terrain

gmaps04.html preview 

Simple - Terrain Code

gmaps04.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_04.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
        </script>
    </body>
</html>

mapPage_04.js

1
2
3
4
5
6
7
8
9
10
11
12

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var mapOptions = {
        zoom: 8,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        mapOptions);
}

Simple - Hybrid - Zoomed

gmaps05.html preview 

Simple - Hybrid - Zoomed Code

gmaps05.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_05.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
        </script>
    </body>
</html>

mapPage_05.js

1
2
3
4
5
6
7
8
9
10
11
12

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var mapOptions = {
        zoom: 18,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        mapOptions);
}

Simple - Zoomed - Modified Controls

gmaps06.html preview 

Simple - Zoomed - Modified Controls Code

gmaps06.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_06.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
        </script>
    </body>
</html>

mapPage_06.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var myOptions = {
    zoom: 18,
    center: classroom,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    zoomControl: true,
    zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},
    mapTypeControl: true,
    mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    streetViewControl: false
};
var map = new google.maps.Map(
    document.getElementById("map_canvas"),
    myOptions);
}

Markers

gmaps07.html preview 

Markers Code

gmaps07.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_07.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
        </script>
    </body>
</html>

mapPage_07.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var office = new google.maps.LatLng(35.084506,-106.624899)
    var myOptions = {
        zoom: 18,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.HYBRID
        };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), 
        myOptions);

    var classroomMarker = new google.maps.Marker({
        position: classroom,
        title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
        });
    classroomMarker.setMap(map);

    var officeMarker = new google.maps.Marker({
        position: office,
        title:"Office, Bandelier West, Room 107"
        });
    officeMarker.setMap(map);
}

Polyline

gmaps08.html preview 

Polyline Code

gmaps08.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_08.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
        </script>
    </body>
</html>

mapPage_08.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var office = new google.maps.LatLng(35.084506,-106.624899)
    var myOptions = {
        zoom: 18,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.HYBRID
        };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), 
        myOptions);

    var classroomMarker = new google.maps.Marker({
        position: classroom,
        title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
        });
    classroomMarker.setMap(map);

    var officeMarker = new google.maps.Marker({
        position: office,
        title:"Office, Bandelier West, Room 107"
        });
    officeMarker.setMap(map); 

    var officeVisitCoordinates = [
        office,
        new google.maps.LatLng(35.084445,-106.624327),
        new google.maps.LatLng(35.084309,-106.624308),
        classroom
        ];
    var officePath = new google.maps.Polyline({
        path: officeVisitCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    officePath.setMap(map)
}

Polygon

gmaps09.html preview 

Polygon Code

gmaps09.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_09.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
        </script>
    </body>
</html>

mapPage_09.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var office = new google.maps.LatLng(35.084506,-106.624899)
    var myOptions = {
        zoom: 18,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.HYBRID
        };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), 
        myOptions);
    var classroomMarker = new google.maps.Marker({
        position: classroom,
        title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
        });
    classroomMarker.setMap(map);
    var officeMarker = new google.maps.Marker({
        position: office,
        title:"Office, Bandelier West, Room 107"
        });
    officeMarker.setMap(map); 
    var buildingCoordinates = [
        new google.maps.LatLng(35.084498,-106.624921),
        new google.maps.LatLng(35.084558,-106.624911),
        new google.maps.LatLng(35.084566,-106.624970),
        new google.maps.LatLng(35.084609,-106.624966),
        new google.maps.LatLng(35.084544,-106.624383),
        new google.maps.LatLng(35.084438,-106.624317),
        new google.maps.LatLng(35.084384,-106.623922),
        new google.maps.LatLng(35.084164,-106.623970),
        new google.maps.LatLng(35.084214,-106.624324),
        new google.maps.LatLng(35.084214,-106.624324),
        new google.maps.LatLng(35.084391,-106.624284)
        ];
    var bldgPoly = new google.maps.Polygon({
        paths: buildingCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35
    });
    bldgPoly.setMap(map)
}

Adding an Info Window

gmaps10.html preview 

Adding an Info Window Code

gmaps10.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_10.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<mykey>">
        </script>
    </body>
</html>

mapPage_10.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var office = new google.maps.LatLng(35.084506,-106.624899)
    var myOptions = {
        zoom: 18,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.HYBRID
        };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), 
        myOptions);
    var classroomMarker = new google.maps.Marker({
        position: classroom,
        title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
        });
    classroomMarker.setMap(map);
    var officeMarker = new google.maps.Marker({
        position: office,
        title:"Office, Bandelier West, Room 107"
        });
    officeMarker.setMap(map); 
    var buildingCoordinates = [
        new google.maps.LatLng(35.084498,-106.624921),
        new google.maps.LatLng(35.084558,-106.624911),
        new google.maps.LatLng(35.084566,-106.624970),
        new google.maps.LatLng(35.084609,-106.624966),
        new google.maps.LatLng(35.084544,-106.624383),
        new google.maps.LatLng(35.084438,-106.624317),
        new google.maps.LatLng(35.084384,-106.623922),
        new google.maps.LatLng(35.084164,-106.623970),
        new google.maps.LatLng(35.084214,-106.624324),
        new google.maps.LatLng(35.084214,-106.624324),
        new google.maps.LatLng(35.084391,-106.624284)
        ];
    var bldgPoly = new google.maps.Polygon({
        paths: buildingCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35
        });
    bldgPoly.setMap(map);
    var classInfoContent = '<div class="infoBox">' +
        '<p>This is the location for the Geography 485L/585L class</p>' +
        '</div>'
    var classInfoWindow = new google.maps.InfoWindow({
        content: classInfoContent
        });
    google.maps.event.addListener(classroomMarker, 'click', function() {
        classInfoWindow.open(map,classroomMarker);
        });
    var bldgInfoContent = '<div class="infoBox">' +
        '<p>This is the location of Bandelier East and West on the UNM Campus</p>' +
        '<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2sus!4v1486322485343!6m8!1m7!1sneDc4DwioOJ-TytixzvJEg!2m2!1d35.08459518161192!2d-106.6243050674837!3f207.5327084691508!4f-4.850942482843806!5f0.7820865974627469" width="300" height="225" frameborder="0" style="border:0" allowfullscreen></iframe>' +
        '</div>'
    var bldgInfoWindow = new google.maps.InfoWindow({
        content: bldgInfoContent
        });
    google.maps.event.addListener(bldgPoly, 'click', function() {
        var position = new google.maps.LatLng(35.084438,-106.624317)
        bldgInfoWindow.setPosition(position)
        bldgInfoWindow.open(map);
        });
}

Overview

Getting Started with Styled Maps - Video

Styled Maps Documentation | Create Map Style wizard

Map Example: Simple - Styled

gmap_styled.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map - Styled (POIs Highlighted)</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_styled.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize function when done -->
        
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize&key=<YourKey>">
        </script>
    </body>
</html>

mapPage_styled.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var myOptions = {
        zoom: 8,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [
          {
            featureType: "water",
            stylers: [
              { visibility: "on" },
              { hue: "#0008ff" }
            ]
          },{
            featureType: "road.highway",
            stylers: [
              { hue: "#ff1a00" }
            ]
          },{
            featureType: "road.arterial",
            stylers: [
              { hue: "#ffa200" },
              { visibility: "simplified" }
            ]
          },{
            featureType: "road.local",
            stylers: [
              { visibility: "off" }
            ]
          },{
            featureType: "administrative",
            stylers: [
              { visibility: "simplified" }
            ]
          },{
            featureType: "poi",
            stylers: [
              { visibility: "on" },
              { hue: "#00ffff" }
            ]
          },{
            featureType: "poi",
            stylers: [
              { visibility: "on" }
            ]
          }
        ]

        };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), 
        myOptions);
}

Google Fusion Tables

Fusion Tables Introduction

Sample Fusion Table from the previous NAWRS Mapper example: https://www.google.com/fusiontables/DataSource?docid=1v2IlIFJqat2tTSBA8e4guqlzMGRe8iW4yXP25Kg

NAWRS Mapper Javascript File: https://github.com/nawrs/nawrs-web/blob/master/js/core.js

Bringing It All Together - link

###

gmaps_events.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/event_mapPage.css">
        <title>Karl's Event Diary</title>
    </head>

    <body>
        <h1>My diary of endurance events that I've participated in since joining 
        Team in Training
        </h1>
        
        <p>In 2008 Cynthia and I joined the Leukemia and Lymphoma Society's 
        (<a href="http://www.lls.org/">LLS</a>) Team in Training 
        (<a href="http://www.teamintraining.org/">TNT</a>, 
        <a href="http://youtu.be/GMSKG8L6K78">info video</a>) program as 
        participants to train for the Animas Valley/Steamworks Half Marathon and
         raise money for blood cancer research and patient services. In spite of
          our not having any direct connection to blood cancer (at that time),  
          we found the goals of LLS admirable, the combined training and 
          fund-raising program of TNT a great idea, and made many new friends 
          over the many seasons that we have been involved with TNT.</p>
        
        <p>From 2008 through early 2015 we  continued to volunteer with TNT, as 
        participants, mentors, and since 2010 I was a coach  (check out my 
        <a href="http://youtu.be/GMSKG8L6K78">half-second</a> of fame in the 
        info video at 2:13) for TNT with an emphasis on training walkers for 
        full- or half-marathons. This page provides a summary of the events that
         I've participated in in some capacity since 2008. </p>
        
        <!-- based on the example provided by Google - 
        https://developers.google.com/maps/documentation/javascript/examples/
        style-selector -->
        <div id="style-selector-control"  class="map-control">
          <select id="style-selector" class="selector-control">
            <option value="default">Default</option>
            <option value="silver">Silver</option>
            <option value="night">Night mode</option>
            <option value="retro" selected="selected">Retro</option>
            <option value="hiding">Hide features</option>
          </select>
        </div>
        
        <div id="event-map" name="event-map"></div>

        <table>
        
        <thead>
        <th>Date</th>
        <th>Event Name</th>
        <th>Event Time</th>
        <th>Location on Map</th>    
        </thead>
        
        <tbody>
        <tr>
            <td>1/8/2017</td> 
            <td>Disney World  Marathon</td>
            <td>7:14</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 
            10)">approx. map</a></td>
        </tr>
        
        <tr>
            <td>10/16/2016</td> 
            <td>Duke City Half Marathon </td>
            <td>~2:55</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[0].point,
             11)">map</a></td>
        </tr>
        
        <tr>
            <td>11/13/2015</td> 
            <td>Avengers Half Marathon </td>
            <td>3:17:55</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[5].point,
             12)">approx. map</a></td>
        </tr>

        <tr>
            <td>1/11/2015</td> 
            <td>Disney World  Marathon (Goofy - Day 2)</td>
            <td>6:21:01</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
             10)">approx. map</a></td>
        </tr>
        

        <tr>
            <td>1/10/2015</td> 
            <td>Disney World Half Marathon (Goofy - Day 1)</td>
            <td>2:45:55</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
             10)">approx. map</a></td>
        </tr>
        
        <tr>
            <td>10/19/2014</td> 
            <td>Duke City Half Marathon</td> 
            <td>2:45:17</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[0].point,
             11)">map</a></td>
        </tr>
        
        <tr>
            <td>2/23/2014</td> 
            <td>Princess Half Marathon</td>
            <td>3:07:11</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
             10)">approx. map</a></td>
        </tr>
        
        <tr>
            <td>2/22/2014</td> 
            <td>Princess Enchanted 10k</td>
            <td>1:42:43</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
             10)">approx. map</a></td>
        </tr>
        
        <tr>
            <td>9/1/2013</td> 
            <td>Disneyland Half Marathon</td> 
            <td>2:56:57</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[5].point,
             12)">approx. map</a></td>
        </tr>
        

        <tr>
            <td>1/13/2013</td> 
            <td>Disney World  Marathon (Goofy - Day 2)</td>
            <td>6:46:57</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
             10)">approx. map</a></td>
        </tr>
        

        <tr>
            <td>1/12/2013</td> 
            <td>Disney World Half Marathon (Goofy - Day 1)</td>
            <td>3:22:48</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
             10)">approx. map</a></td>
        </tr>
        
    
        <tr>
            <td>9/29/2012</td> 
            <td>Hot Chocolate 15k </td>
            <td>1:56:46</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[6].point,
             10)">map</a></td>
        </tr>
        

        <tr>
            <td>6/9/2012</td> 
            <td>Animas Valley/Steamworks Half Marathon</td> 
            <td>no time: coached</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[1].point,
             10)">map</a></td>
        </tr>
        

        <tr>
            <td>1/9/2012</td> 
            <td>Disney World  Marathon (Goofy - Day 2)</td>
            <td>6:56:28</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
             10)">map</a></td>
        </tr>
        

        <tr>
            <td>1/8/2011</td> 
            <td>Disney World Half Marathon (Goofy - Day 1)</td>
            <td>3:29:00</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
             10)">map</a></td>
        </tr>
        

        <tr>
            <td>6/19/2010</td> 
            <td>Animas Valley/Steamworks Half Marathon</td> 
            <td>no time: coached</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[1].point,
             10)">map</a></td>
        </tr>
        

        <tr>
            <td>6/6/2010</td> 
            <td>San Diego Rock 'n' Roll Marathon</td> 
            <td>no time: coached</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[2].point,
             11)">map</a></td>
        </tr>
        

        <tr>
            <td>10/18/09</td> 
            <td>Nike Women's Marathon</td> 
            <td>7:13:05</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[3].point,
             12)">map</a></td>
        </tr>
        

        <tr>
            <td>9/6/2009</td> 
            <td>Disneyland Half Marathon</td> 
            <td>3:43:05</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[5].point,
             12)">map</a></td>
        </tr>
        

        <tr>
            <td>1/11/2009</td> 
            <td>Disney World Marathon</td> 
            <td>6:57:42</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[4].point,
             10)">map</a></td>
        </tr>
        

        <tr>
            <td>10/19/2008</td> 
            <td>Duke City Half Marathon</td> 
            <td>3:09:42</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[0].point,
             11)">map</a></td>
        </tr>
        

        <tr>
            <td>6/21/2008</td> 
            <td>Animas Valley/Steamworks Half Marathon</td> 
            <td>3:14:52</td> 
            <td><a href="#event-map" onclick="recenter(map, eventPlaces[1].point,
             10)">map</a></td>
        </tr>
        </tbody>
        </table>
        

    </body>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_events.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
        function when done -->
        
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize&
            key=<YourKey>">
        </script>
    </body>
</html>

gmaps_events.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387

var map;
var eventPlaces;

function initialize() {
    // Define a set of global coordinates for use throughout the web site
    // Place coordinates derived from GNIS database: http://geonames.usgs.gov/
    // pls/gnispublic
    // from https://tools.wmflabs.org/geohack/geohack.php?
    // pagename=Geographic_center_of_the_contiguous_United_States&
    // params=39.828175_N_98.579500_W_region:US_type:landmark
    geoCenter = new google.maps.LatLng(39.828175,-98.5795) 
    eventPlaces = [
        {
            name: "Albuquerque", 
            point: new google.maps.LatLng(35.0889356,-106.5747462),
            label: "Albuquerque: Duke City Half Marathon"
        }, 
        {
            name: "Durango", 
            point: new google.maps.LatLng(37.2752800,-107.8800667),
            label: "Durango: Animas Valley/Steamworks Half Marathon"
        },
        {
            name: "San Diego", 
            point: new google.maps.LatLng(32.7153292,-117.1572551),
            label: "San Diego: San Diego Rock 'n' Roll Marathon"
        },
        {
            name: "San Francisco", 
            point: new google.maps.LatLng(37.7749295,-122.4194155),
            label: "San Francisco: Nike Women's Marathon"
        },
        {
            name: "Orlando", 
            point: new google.maps.LatLng(28.5383355,-81.3792365),
            label: "Orlando: Walt Disney World half- and full-marathon"
        },
        {
            name: "Anaheim", 
            point: new google.maps.LatLng(33.8352932,-117.9145036),
            label: "Anaheim: Disneyland Half Marathon"
        },
        {
            name: "Albuquerque", 
            point: new google.maps.LatLng(35.0889356,-106.5747462),
            label: "Hot Chocolate 15k"
        } 

    ];

    var myOptions = {
        zoom: 4,
        center: geoCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false};

    map = new google.maps.Map(
        document.getElementById("event-map"), 
        myOptions);

    addMarkers(map,eventPlaces)
    
    // Add a style-selector control to the map.
    var styleControl = document.getElementById('style-selector-control');
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(styleControl);
    
    // Set the map's style to the initial value of the selector.
    var styleSelector = document.getElementById('style-selector');
    map.setOptions({styles: styles[styleSelector.value]});
    
    // Apply new JSON when the user selects a different style.
    styleSelector.addEventListener('change', function() {
         map.setOptions({styles: styles[styleSelector.value]});
    });
}

function recenter(mapName, latlon, zoomLevel) {
    mapName.setCenter(latlon);
    mapName.setZoom(zoomLevel)
}

function addMarkers(mapName, markerArray) {
    for (index = 0; index < markerArray.length; index++) {
        myMarker = new google.maps.Marker({
            position: markerArray[index].point,
            title: markerArray[index].label
        });
        myMarker.setMap(mapName)
    }
}

// styles generated by https://mapstyle.withgoogle.com
var styles = {
default: null,
silver: [
  {
    elementType: 'geometry',
    stylers: [{color: '#f5f5f5'}]
  },
  {
    elementType: 'labels.icon',
    stylers: [{visibility: 'off'}]
  },
  {
    elementType: 'labels.text.fill',
    stylers: [{color: '#616161'}]
  },
  {
    elementType: 'labels.text.stroke',
    stylers: [{color: '#f5f5f5'}]
  },
  {
    featureType: 'administrative.land_parcel',
    elementType: 'labels.text.fill',
    stylers: [{color: '#bdbdbd'}]
  },
  {
    featureType: 'poi',
    elementType: 'geometry',
    stylers: [{color: '#eeeeee'}]
  },
  {
    featureType: 'poi',
    elementType: 'labels.text.fill',
    stylers: [{color: '#757575'}]
  },
  {
    featureType: 'poi.park',
    elementType: 'geometry',
    stylers: [{color: '#e5e5e5'}]
  },
  {
    featureType: 'poi.park',
    elementType: 'labels.text.fill',
    stylers: [{color: '#9e9e9e'}]
  },
  {
    featureType: 'road',
    elementType: 'geometry',
    stylers: [{color: '#ffffff'}]
  },
  {
    featureType: 'road.arterial',
    elementType: 'labels.text.fill',
    stylers: [{color: '#757575'}]
  },
  {
    featureType: 'road.highway',
    elementType: 'geometry',
    stylers: [{color: '#dadada'}]
  },
  {
    featureType: 'road.highway',
    elementType: 'labels.text.fill',
    stylers: [{color: '#616161'}]
  },
  {
    featureType: 'road.local',
    elementType: 'labels.text.fill',
    stylers: [{color: '#9e9e9e'}]
  },
  {
    featureType: 'transit.line',
    elementType: 'geometry',
    stylers: [{color: '#e5e5e5'}]
  },
  {
    featureType: 'transit.station',
    elementType: 'geometry',
    stylers: [{color: '#eeeeee'}]
  },
  {
    featureType: 'water',
    elementType: 'geometry',
    stylers: [{color: '#c9c9c9'}]
  },
  {
    featureType: 'water',
    elementType: 'labels.text.fill',
    stylers: [{color: '#9e9e9e'}]
  }
],

night: [
  {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
  {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
  {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
  {
    featureType: 'administrative.locality',
    elementType: 'labels.text.fill',
    stylers: [{color: '#d59563'}]
  },
  {
    featureType: 'poi',
    elementType: 'labels.text.fill',
    stylers: [{color: '#d59563'}]
  },
  {
    featureType: 'poi.park',
    elementType: 'geometry',
    stylers: [{color: '#263c3f'}]
  },
  {
    featureType: 'poi.park',
    elementType: 'labels.text.fill',
    stylers: [{color: '#6b9a76'}]
  },
  {
    featureType: 'road',
    elementType: 'geometry',
    stylers: [{color: '#38414e'}]
  },
  {
    featureType: 'road',
    elementType: 'geometry.stroke',
    stylers: [{color: '#212a37'}]
  },
  {
    featureType: 'road',
    elementType: 'labels.text.fill',
    stylers: [{color: '#9ca5b3'}]
  },
  {
    featureType: 'road.highway',
    elementType: 'geometry',
    stylers: [{color: '#746855'}]
  },
  {
    featureType: 'road.highway',
    elementType: 'geometry.stroke',
    stylers: [{color: '#1f2835'}]
  },
  {
    featureType: 'road.highway',
    elementType: 'labels.text.fill',
    stylers: [{color: '#f3d19c'}]
  },
  {
    featureType: 'transit',
    elementType: 'geometry',
    stylers: [{color: '#2f3948'}]
  },
  {
    featureType: 'transit.station',
    elementType: 'labels.text.fill',
    stylers: [{color: '#d59563'}]
  },
  {
    featureType: 'water',
    elementType: 'geometry',
    stylers: [{color: '#17263c'}]
  },
  {
    featureType: 'water',
    elementType: 'labels.text.fill',
    stylers: [{color: '#515c6d'}]
  },
  {
    featureType: 'water',
    elementType: 'labels.text.stroke',
    stylers: [{color: '#17263c'}]
  }
],

retro: [
  {elementType: 'geometry', stylers: [{color: '#ebe3cd'}]},
  {elementType: 'labels.text.fill', stylers: [{color: '#523735'}]},
  {elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
  {
    featureType: 'administrative',
    elementType: 'geometry.stroke',
    stylers: [{color: '#c9b2a6'}]
  },
  {
    featureType: 'administrative.land_parcel',
    elementType: 'geometry.stroke',
    stylers: [{color: '#dcd2be'}]
  },
  {
    featureType: 'administrative.land_parcel',
    elementType: 'labels.text.fill',
    stylers: [{color: '#ae9e90'}]
  },
  {
    featureType: 'landscape.natural',
    elementType: 'geometry',
    stylers: [{color: '#dfd2ae'}]
  },
  {
    featureType: 'poi',
    elementType: 'geometry',
    stylers: [{color: '#dfd2ae'}]
  },
  {
    featureType: 'poi',
    elementType: 'labels.text.fill',
    stylers: [{color: '#93817c'}]
  },
  {
    featureType: 'poi.park',
    elementType: 'geometry.fill',
    stylers: [{color: '#a5b076'}]
  },
  {
    featureType: 'poi.park',
    elementType: 'labels.text.fill',
    stylers: [{color: '#447530'}]
  },
  {
    featureType: 'road',
    elementType: 'geometry',
    stylers: [{color: '#f5f1e6'}]
  },
  {
    featureType: 'road.arterial',
    elementType: 'geometry',
    stylers: [{color: '#fdfcf8'}]
  },
  {
    featureType: 'road.highway',
    elementType: 'geometry',
    stylers: [{color: '#f8c967'}]
  },
  {
    featureType: 'road.highway',
    elementType: 'geometry.stroke',
    stylers: [{color: '#e9bc62'}]
  },
  {
    featureType: 'road.highway.controlled_access',
    elementType: 'geometry',
    stylers: [{color: '#e98d58'}]
  },
  {
    featureType: 'road.highway.controlled_access',
    elementType: 'geometry.stroke',
    stylers: [{color: '#db8555'}]
  },
  {
    featureType: 'road.local',
    elementType: 'labels.text.fill',
    stylers: [{color: '#806b63'}]
  },
  {
    featureType: 'transit.line',
    elementType: 'geometry',
    stylers: [{color: '#dfd2ae'}]
  },
  {
    featureType: 'transit.line',
    elementType: 'labels.text.fill',
    stylers: [{color: '#8f7d77'}]
  },
  {
    featureType: 'transit.line',
    elementType: 'labels.text.stroke',
    stylers: [{color: '#ebe3cd'}]
  },
  {
    featureType: 'transit.station',
    elementType: 'geometry',
    stylers: [{color: '#dfd2ae'}]
  },
  {
    featureType: 'water',
    elementType: 'geometry.fill',
    stylers: [{color: '#b9d3c2'}]
  },
  {
    featureType: 'water',
    elementType: 'labels.text.fill',
    stylers: [{color: '#92998d'}]
  }
],

hiding: [
  {
    featureType: 'poi.business',
    stylers: [{visibility: 'off'}]
  },
  {
    featureType: 'transit',
    elementType: 'labels.icon',
    stylers: [{visibility: 'off'}]
  }
]
};

Overview

Geographic Information Systems

Data Types - Vector

For example, a census vector data product might include the geometries that define census tracts and attributes associated with each geometry: population, income, etc.

Data Types - Raster

Accessing and Processing Raster and Vector Data

Accessing and Processing Raster and Vector Data - Programmatically

OGR
vector data access and information
GDAL
raster data access and information

These libraries are the data access and processing foundation for a growing number of open source and commercial mapping systems

Information and documentation: GDAL Home Page | OGR Home Page

Coordinate Systems/Projections

EPSG Codes

Projection Parameters

The parameters that define a map projection may be looked up in a number of online locations:

EPSG registry
Helpful if you already know the EPSG code of the projection you are looking for - http://www.epsg-registry.org/
GeoTIFF Projection List
Helpful if you know the name of one of the broadly used projections - uneven performance of links - http://www.remotesensing.org/geotiff/proj_list/ [Archived Version]
SpatialReference.org
Decent search tool, includes non-EPSG as well as EPSG projection information, multiple descriptions of projection parameters - http://spatialreference.org/

Services Oriented Architectures

Where have we come from - ENIAC (1946)

ENIAC Computer

ENIAC Computer

Where have we come from - Early Client-Server Computing (1960s)

IBM 704 Mainframe Computer

IBM 704 Mainframe Computer

Model 33 ASR Teletype

Model 33 ASR Teletype

TeleVideo 925 ASCII Terminal

TeleVideo 925 ASCII Terminal

Where have we come from - Personal Computers (1970s)

IBM 5150 Personal Computer

IBM 5150 Personal Computer

Apple I Personal Computer

Apple I Personal Computer

Now - Network computing

World Internet Hosts 1/94-1/13. Image courtesy IWS - http://www.isc.org/services/survey/

World Internet Hosts 1/94-1/13. Image courtesy IWS - http://www.isc.org/services/survey/

Network Computing Timeline

In a Phrase ...

The current networking computing model consists of Components Interacting with Each Other

So - We Need to Answer the Following Questions

What are components?

What does it mean to interact?

The Big Picture - Services Oriented Architectures

SOA Illustration

SOA Illustration

The Pieces - Components

Key Components - Data

Database systems

Key Components - Data

File-based data

Key Components - Processing Services

Key Components - Clients

The Glue - Interoperability Standards / Service Interfaces

Open Geospatial Consortium Interoperability Standards

Open Geospatial Consortium (OGC) Standards

Comparison of OGC Service Models

Comparison of OGC Service Models

Comparison of OGC Service Models

OGC Web Map Services (WMS)

WMS request result for Bernalillo County Landsat Mosaic from NM RGIS link

WMS request result for Bernalillo County Landsat Mosaic from NM RGIS link

http://gstore.unm.edu/apps/rgis/datasets/
b030ab7b-86e3-4c30-91c0-f427303d5c77/
services/ogc/wms?
    VERSION=1.1.1&&
    SERVICE=WMS&
    REQUEST=GetMap&
    SRS=EPSG:4326&
    FORMAT=image/jpeg&
    STYLES=&
    LAYERS=bernalillo_tm2011&
    TRANSPARENT=TRUE&
    WIDTH=521&
    HEIGHT=200&
    bbox=-107.207,34.8404,-106.143,35.2487

OGC Web Feature Services (WMS) Characteristics

OGC Web Feature Services (WFS) Characteristics

OGC Web Coverage Services (WCS) Characteristics

OGC Geography Markup Language (GML)

OGC KML

Implementation of the OGC Standards

Implementation information based upon OGC Implementation Statistics - Accessed 2/2017

OGC Summary

The OGC web service specifications support key geospatial data access requirements

WMS
visualization of geospatial data through simple web requests
WFS
delivery of geospatial data (typically points, lines, and polygons) in a format that is usable in GIS and other applications
WCS
delivery of geospatial data (typically, but not limited to, raster data) usable in other applications

OGC Summary

The OGC data and representation standards support data exchange and higher level representation

GML
XML schema for the representation of features and associated attributes. It may be extended for use by specific communities of users (i.e. ecological data models)
KML
XML schema that supports the combination of embedded data and external data into a complete representation model that may be used by client applications to present the data through a user interface (e.g. Google Earth, WorldWind)

Overview

Extensible Markup Language - XML

XML Background

SGML Relationship with XML and HTML

SGML Relationship with XML and HTML

XML Design Goals

From XML 1.0 (5th ed.) Recommendation

XML Structure - Well Formed / Valid

XML Wikipedia Article

Simple XML Document

1
2
3
4
5
6
7
8

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Some comment would go here to describe this document ... -->
<note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body type="instruction" >Don't forget me this weekend!</body>
</note>

XML Source (modified from original): w3schools

XML Prolog

Includes XML Declaration and Comment

1
2

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Some comment would go here to describe this document ... -->

XML Elements

Define blocks of content

3
4
5
6
7
8

<note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body type="instruction" >Don't forget me this weekend!</body>
</note>

XML Root Element

3
4
5
6
7
8

<note>
    ...
    ...
    ...
    ...
</note>

XML Content Elements

4
5
6
7

    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body type="instruction" >Don't forget me this weekend!</body>

XML Attributes

Define additional information about elements as name=value pairs.

7

    <body type="instruction" >Don't forget me this weekend!</body>

XML Element Content

The material contained between the opening and closing tags of an Element.

7

    <body type="instruction" >Don't forget me this weekend!</body>

Valid XML?

Why is this XML well-formed but not valid?

There is no DTD or Schema defined for the document against which it can be validated

1
2
3
4
5
6
7
8

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<note>
    <to>Tove</to>
    <from>Jani</from>
    <heading>Reminder</heading>
    <body type="instruction" >Don't forget me this weekend!</body>
</note>

Common XML Constructs

Document Type Declaration (DTD) references (PROLOG)
definition, either by reference or by direct inclusion, the allowed structure of an XML document, for example:


<!DOCTYPE greeting SYSTEM "hello.dtd">

CDATA Sections
blocks of XML that contain characters that would otherwise be recognized as XML markup, for example:


<![CDATA[<greeting>Hello, world!</greeting>]]>

XML Namespace Declarations
additional information included in elements to distinguish between duplicate element names, for example (declared in lines 1-3, used in lines 5-17):
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<root 
    xmlns:h="http://www.w3.org/TR/html4/" 
    xmlns:f="http://www.w3schools.com/furniture">

<h:table>
    <h:tr>
        <h:td>Apples</h:td>
        <h:td>Bananas</h:td>
    </h:tr>
</h:table>
<f:table>
    <f:legs>4</f:legs>
    <f:cost>300</f:cost>
    <f:width>3</f:width>
    <f:length>5</f:length>
    <f:height>4</f:height>
</f:table>
</root>

KML

KML Background

KML
an XML document, with a “.kml” extension that is directly readable and editable
KMZ
a compressed (zipped) file with a “.kmz” extension1, that contains at least a KML document, but may contain other files as well.

KML Capabilities

KML Content

2D and 3D KML Sample

Illustration of polygon in both planar and terrain surface

Illustration of polygon in both planar and terrain surface

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
    <Placemark>
        <Polygon>
            <altitudeMode>
                clampToGround
            </altitudeMode>
            <outerBoundaryIs>
                <LinearRing>
                    <coordinates>
                        -135,78.5,300000 
                        -135,12.5,300000 
                        -45,12.5,300000 
                        -45,78.5,300000 
                        -135,78.5,300000
                    </coordinates>
                </LinearRing>
            </outerBoundaryIs>
        </Polygon>
    </Placemark>
</Document>
</kml>

KML Example

Example from: KML 2.2 Specification (fig. 6, pg. 21)

High-Level KML Content Types

Features
including documents, folders, placemarks, network links
Geometries
including points, linestrings, polygons, models, locations
Overlays
including ground overlays, lat-lon boxes, photo overlays, screen overlays
Styles
styles, substyles, icons, label styles
Links
read, update, create, delete, change
Views
camera, look at
Time
time span, timestamp

KML Demonstration and References

New Mexico State Boundary KML File | KMZ File (from NM RGIS)

Google Code KML Documentation

OGC KML Implementation specification

OGC Web map Services - WMS

WMS - Overview

WMS GetCapabilities Request

Request Parameter 1.0 1.1 1.1.1 1.3.0 Description
WMTVER = 1.0.0 R Request version
VERSION = version O O O Request version
SERVICE = WMS R R R R Service type
REQUEST = capabilities R Request name
REQUEST = GetCapabilities R R R Request name
UPDATESEQUENCE = string O O O Sequence number or string for cache control
Vendor-specific parameters O Vendor-specific parameters

R=Required / O=Optional

WMS GetMap Request (Core)

Request Parameter 1.0 1.1 1.1.1 1.3.0 Description
WMTVER = 1.0.0 R Request version
VERSION = version R R R Request version.
REQUEST = map R Request name.
REQUEST = GetMap R R R Request name.
LAYERS = layer_list R R R R Comma-separated list of one or more map layers. Optional (ver. 1.1, 1.1.1) if SLD parameter is present.
STYLES = style_list R R R R Comma-separated list of one rendering style per requested layer. Optional if SLD parameter is present.
SRS = namespace:identifier R R R Spatial Reference System.
CRS = namespace:identifier R Spatial Reference System.
BBOX = minx,miny,maxx,maxy R R R R Bounding box corners (lower left, upper right) in SRS units.
WIDTH = output_width R R R R Width in pixels of map picture.
HEIGHT = output_height R R R R Height in pixels of map picture.
FORMAT = output_format R R R R Output format of map.
TRANSPARENT = TRUE or FALSE O O O O Background transparency of map (default = FALSE).
BGCOLOR = color_value O O O O Hexadecimal red-green-blue color value for the background color (default = 0xFFFFFF).
EXCEPTIONS = exception_format O O O O The format in which exceptions are to be reported by the WMS (default = XML).
TIME = time O O O Time value of layer desired.
ELEVATION = elevation O O O Elevation of layer desired.
Other sample dimensions O O O Values of other dimensions as appropriate.
Vendor specific parameters O O O O Vendor specific parameters

WMS GetFeatureInfo Request

Request Parameter 1.0 1.1 1.1.1 1.3.0 Description
WMTVER = 1.0.0 R Request version.
VERSION = version R R R Request version.
REQUEST = feature_info R Request name.
REQUEST = GetFeatureInfo R R R Request name.
<map_request_copy> R R R R Partial copy of the Map request parameters that generated the map for which information is desired
QUERY_LAYERS = layer_list R R R R Comma-separated list of one or more layers to be queried.
INFO_FORMAT = output_format O O O R Return format of feature information (MIME type).
FEATURE_COUNT = number O O O O Number of features about which to return information (default = 1).
X = pixel_column R R R X coordinate in pixels of feature (measured from upper left corner = 0)
I = pixel_column R i coordinate in pixels of feature in Map CS
Y = pixel_row R R R Y coordinate in pixels of feature (measured from upper left corner = 0)
J = pixel_row R j coordinate in pixels of feature in Map CS
EXCEPTIONS = exception_format O O O The format in which exceptions are to be reported by the WMS (default = XML).
Vendor-specific parameters O O O Optional experimental parameters.

WMS GetCapabilities

1
2
3
4
5

http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
da70dc92f2cc/services/ogc/wms?
    SERVICE=wms&
    REQUEST=GetCapabilities&
    VERSION=1.1.1

Live Link

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198

<?xml version='1.0' encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE WMT_MS_Capabilities SYSTEM "http://schemas.opengis.net/wms/1.1.1/
WMS_MS_Capabilities.dtd"
 [
 <!ELEMENT VendorSpecificCapabilities EMPTY>
 ]>  <!-- end of DOCTYPE declaration -->

<WMT_MS_Capabilities version="1.1.1">

<!-- MapServer version 6.0.3 OUTPUT=GIF OUTPUT=PNG OUTPUT=JPEG OUTPUT=KML SUPPORTS=PROJ 
SUPPORTS=AGG SUPPORTS=FREETYPE SUPPORTS=ICONV SUPPORTS=WMS_SERVER SUPPORTS=WMS_CLIENT 
SUPPORTS=WFS_SERVER SUPPORTS=WFS_CLIENT SUPPORTS=WCS_SERVER SUPPORTS=SOS_SERVER 
INPUT=POSTGIS INPUT=OGR INPUT=GDAL INPUT=SHAPEFILE -->

<Service>
  <Name>OGC:WMS</Name>
  <Title>tl_2010_35_state10</Title>
  <Abstract>WMS Service for RGIS dataset State Boundary - 2010 
  (6ca5428a-a78c-4c82-8120-da70dc92f2cc)</Abstract>
        <KeywordList>
          <Keyword>RGIS</Keyword>
          <Keyword> New Mexico</Keyword>
        </KeywordList>
  <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" 
  xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
  da70dc92f2cc/services/ogc/wms"/>
  <ContactInformation>
    <ContactPersonPrimary>
      <ContactPerson>GStore Support</ContactPerson>
      <ContactOrganization>Earth Data Analysis Center</ContactOrganization>
    </ContactPersonPrimary>
      <ContactPosition>technical support</ContactPosition>
    <ContactAddress>
        <AddressType>Mailing address</AddressType>
        <Address>Earth Data Analysis Center, MSC01 1110, 
        1 University of New Mexico</Address>
        <City>Albuquerque</City>
        <StateOrProvince>NM</StateOrProvince>
        <PostCode>87131</PostCode>
        <Country>US</Country>
    </ContactAddress>
      <ContactVoiceTelephone>(505) 277-3622</ContactVoiceTelephone>
      <ContactFacsimileTelephone>(505) 277-3614</ContactFacsimileTelephone>
  <ContactElectronicMailAddress>gstore@edac.unm.edu</ContactElectronicMailAddress>
  </ContactInformation>
  <Fees>None</Fees>
  <AccessConstraints>none</AccessConstraints>
</Service>

<Capability>
  <Request>
    <GetCapabilities>
      <Format>application/vnd.ogc.wms_xml</Format>
      <DCPType>
        <HTTP>
          <Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" 
          xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
          8120-da70dc92f2cc/services/ogc/wms?"/></Get>
          <Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" 
          xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
          8120-da70dc92f2cc/services/ogc/wms?"/></Post>
        </HTTP>
      </DCPType>
    </GetCapabilities>
    <GetMap>
      <Format>image/png</Format>
      <Format>image/gif</Format>
      <Format>image/jpeg</Format>
      <Format>image/png; mode=8bit</Format>
      <Format>image/tiff</Format>
      <Format>application/vnd.google-earth.kml+xml</Format>
      <Format>application/vnd.google-earth.kmz</Format>
      <DCPType>
        <HTTP>
          <Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" 
          xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
          8120-da70dc92f2cc/services/ogc/wms?"/></Get>
          <Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" 
          xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
          8120-da70dc92f2cc/services/ogc/wms?"/></Post>
        </HTTP>
      </DCPType>
    </GetMap>
    <GetFeatureInfo>
      <Format>text/plain</Format>
      <Format>application/vnd.ogc.gml</Format>
      <DCPType>
        <HTTP>
          <Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" 
          xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
          8120-da70dc92f2cc/services/ogc/wms?"/></Get>
          <Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" 
          xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-
          8120-da70dc92f2cc/services/ogc/wms?"/></Post>
        </HTTP>
      </DCPType>
    </GetFeatureInfo>
    <DescribeLayer>
      <Format>text/xml</Format>
      <DCPType>
        <HTTP>
          <Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" 
          xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
          da70dc92f2cc/services/ogc/wms?"/></Get>
          <Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" 
          xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
          da70dc92f2cc/services/ogc/wms?"/></Post>
        </HTTP>
      </DCPType>
    </DescribeLayer>
    <GetLegendGraphic>
      <Format>image/png</Format>
      <Format>image/gif</Format>
      <Format>image/jpeg</Format>
      <Format>image/png; mode=8bit</Format>
      <DCPType>
        <HTTP>
          <Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" 
          xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
          da70dc92f2cc/services/ogc/wms?"/></Get>
          <Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" 
          xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
          da70dc92f2cc/services/ogc/wms?"/></Post>
        </HTTP>
      </DCPType>
    </GetLegendGraphic>
    <GetStyles>
      <Format>text/xml</Format>
      <DCPType>
        <HTTP>
          <Get><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" 
          xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
          da70dc92f2cc/services/ogc/wms?"/></Get>
          <Post><OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" 
          xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-
          da70dc92f2cc/services/ogc/wms?"/></Post>
        </HTTP>
      </DCPType>
    </GetStyles>
  </Request>
  <Exception>
    <Format>application/vnd.ogc.se_xml</Format>
    <Format>application/vnd.ogc.se_inimage</Format>
    <Format>application/vnd.ogc.se_blank</Format>
  </Exception>
  <VendorSpecificCapabilities />
  <UserDefinedSymbolization SupportSLD="1" UserLayer="0" UserStyle="1" RemoteWFS="0"/>
  <Layer>
    <Name>tl_2010_35_state10</Name>
    <Title>tl_2010_35_state10</Title>
    <Abstract>WMS Service for RGIS dataset State Boundary - 2010 
    (6ca5428a-a78c-4c82-8120-da70dc92f2cc)</Abstract>
    <KeywordList>
     <Keyword>RGIS</Keyword>
     <Keyword> New Mexico</Keyword>
    </KeywordList>
    <SRS>EPSG:4269</SRS>
    <SRS>EPSG:4326</SRS>
    <SRS>EPSG:4267</SRS>
    <SRS>EPSG:26913</SRS>
    <SRS>EPSG:26912</SRS>
    <SRS>EPSG:26914</SRS>
    <SRS>EPSG:26713</SRS>
    <SRS>EPSG:26712</SRS>
    <SRS>EPSG:26714</SRS>
    <SRS>EPSG:3857</SRS>
    <LatLonBoundingBox minx="-109.05" miny="31.3322" maxx="-103.002" maxy="37.0003" />
    <BoundingBox SRS="EPSG:4326"
                minx="-109.05" miny="31.3322" maxx="-103.002" maxy="37.0003" />
    <Layer queryable="1" opaque="0" cascaded="0">
        <Name>tl_2010_35_state10</Name>
        <Title>tl_2010_35_state10</Title>
        <Abstract>State Boundary - 2010</Abstract>
        <KeywordList>
          <Keyword></Keyword>
        </KeywordList>
        <SRS>epsg:4326</SRS>
        <LatLonBoundingBox minx="-109.05" miny="31.3322" maxx="-103.002" maxy="37.0003" />
        <BoundingBox SRS="epsg:4326"
                    minx="-109.05" miny="31.3322" maxx="-103.002" maxy="37.0003" />
        <MetadataURL type="FGDC-STD-001-1998">
          <Format>text/xml</Format>
          <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" 
          xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/metadata/FGDC-STD-001-1998.xml"/>
        </MetadataURL>
        <Style>
          <Name>default</Name>
          <Title>default</Title>
          <LegendURL width="72" height="22">
             <Format>image/png</Format>
             <OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple" 
             xlink:href="http://gstore.unm.edu/apps/rgis/datasets/6ca5428a-a78c-4c82-8120-da70dc92f2cc/services/ogc/wms?version=1.1.1&amp;service=WMS&amp;request=GetLegendGraphic&amp;layer=tl_2010_35_state10&amp;format=image/png&amp;STYLE=default"/>
          </LegendURL>
        </Style>
    </Layer>
  </Layer>
</Capability>
</WMT_MS_Capabilities>

WMS GetMap

Sample WMS response #1

Sample WMS response #1

1
2
3
4
5
6
7
8
9
10
11
12
13

http://gstore.unm.edu/apps/rgis/datasets/
6ca5428a-a78c-4c82-8120-da70dc92f2cc/
services/ogc/wms?
    VERSION=1.1.1&
    SERVICE=WMS&
    REQUEST=GetMap&
    BBOX=-109,31,-102.9,37.1&
    LAYERS=tl_2010_35_state10&
    WIDTH=200&
    HEIGHT=200&
    SRS=EPSG:4326&
    FORMAT=image/jpeg&
    STYLES=

link

Sample WMS response #2

Sample WMS response #2

1
2
3
4
5
6
7
8
9
10
11
12
13
14

http://gstore.unm.edu/apps/rgis/datasets/
6ca5428a-a78c-4c82-8120-da70dc92f2cc/
services/ogc/wms?
    VERSION=1.1.1&
    SERVICE=WMS&
    REQUEST=GetMap&
    BBOX=-109,31,-102.9,37.1&
    LAYERS=tl_2010_35_state10&
    WIDTH=300&
    HEIGHT=300&
    SRS=EPSG:4326&
    TRANSPARENT=TRUE&
    FORMAT=image/png&
    STYLES=

link

Integraton of WMS and KML

Sample WMS-KML Integration

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" 
    xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
    <GroundOverlay>
        <name>RGIS Counties WMS</name>
        <Icon>
            <href>http://gstore.unm.edu/apps/rgis/datasets/107046/services/ogc/wms?
            VERSION=1.1.1&amp;SERVICE=WMS&amp;REQUEST=GetMap&amp;BBOX=-109,31,-102.9,37.1
            &amp;LAYERS=tl_2010_35_state10&amp;WIDTH=800&amp;HEIGHT=800&amp;SRS=EPSG:4326
            &amp;FORMAT=image/png&amp;STYLES=</href>
            <viewRefreshMode>onStop</viewRefreshMode>
        </Icon>
        <LatLonBox>
            <north>37.32753828398865</north>
            <south>30.86418272137246</south>
            <east>-101.3630220689848</east>
            <west>-110.6891149310152</west>
        </LatLonBox>
    </GroundOverlay>
</kml>

Sample KML File

Overview

OGC Web Feature Service (WFS)

Background

The documents related to the OGC WFS standard are available from: http://www.opengeospatial.org/standards/wfs and all operation parameter tables presented here are based upon the OpenGIS Web Feature Service 2.0 Interface Standard - Panagiotis (Peter) A. Vretanos, editor - 2010-11-02

From the Version 2.0.0 WFS Scope Section:

This International Standard specifies the behaviour of a service that provides transactions on and access to geographic features in a manner independent of the underlying data store. It specifies discovery operations, query operations, locking operations, transaction operations and operations to manage stored parameterized query expressions.

Discovery operations allow the service to be interrogated to determine its capabilities and to retrieve the application schema that defines the feature types that the service offers.

Query operations allow features or values of feature properties to be retrieved from the underlying data store based upon constraints, defined by the client, on feature properties.

Locking operations allow exclusive access to features for the purpose of modifying or deleting features.

Transaction operations allow features to be created, changed, replaced and deleted from the underlying data store.

Stored query operations allow clients to create, drop, list and described parameterized query expressions that are stored by the server and can be repeatedly invoked using different parameter values.

WFS Requests/Operations

These request types are submitted as part of the required REQUEST key in a KVP HTTP GET request.

GetCapabilities
service metadata (XML) that documents the types of features supported by the service and the operations supported by each feature type
DescribeFeatureType
metadata (XML) that describes the structure of supported feature types
GetPropertyValue
a request for the value(s) of a specified property for a specified featuretype
GetFeature (GetFeatureWithLock)
a request for actual features (XML, or other formats) from the service. The request may include both spatial and non-spatial query constraints
LockFeature
Feature locking operation
Transaction
a request to a WFS that may create, update, or delete features
CreateStoredQuery
a request to create a named WFS query that is stored on the server for future reuse
DropStoredQuery
a request to remove a named WFS query that has previously been stored on the server
ListStoredQueries
a request to retrieve a list of named WFS queries that have been stored on the server
DescribeStoredQueries
a request for more detailed information about specific named WFS queries that are stored on the server

WFS Conformance Levels

WFS 2.0.0 Requests and their corresponding WFS Compliance Levels

Operation (REQUEST=) V 1.1.0 V 2.0.0 Simple Basic Transactional Locking
GetCapabilities
DescribeFeatureType
ListStoredQueries
DescribeStoredQueries
GetFeature
StoredQuery
GetPropertyValue
Transaction
GetFeatureWithLock
LockFeature
GetGMLObject

Request Composition

Requests submitted to a WFS may be submitted either via

HTTP GET
a request that includes all request parameters within the URL submitted to the service. Request parameters are included in the URL as “key=value” pairs (KVPs)
HTTP POST
a request where the URL consists of only the Host and path, with all other request parameters included in the body of the POST document submitted to the service. The request parameters supplied to the server are encoded as XML within the POST document.
SOAP
a request submitted as an encapsulated message within a SOAP transaction.

Servers implementing WFS may support either the HTTP GET, POST, or SOAP request model

Conceptually FeatureType = Layer

KVP for Base WFS Requests

Base request parameters for all HTTP GET KVP requests

Table 4 from OpenGIS Web Feature Service 2.0 Interface Standard - Panagiotis (Peter) A. Vretanos, editor - 2010-11-02

Table 4 from OpenGIS Web Feature Service 2.0 Interface Standard - Panagiotis (Peter) A. Vretanos, editor - 2010-11-02

VERSION is required for all operations except the GetCapabilities request

Sample GetCapabilities Requests

Sample request to USGS Framework Layer (Governmental Units) WFS Service advertised by the USGS TNM Access API page service list - Live Link

http://services.nationalmap.gov/arcgis/services/WFS/govunits/MapServer/WFSServer?
    request=GetCapabilities&
    service=WFS

Sample request to NM RGIS (NM 2010 Census Block Groups) - Live Link

http://gstore.unm.edu/apps/rgis/datasets/715663ba-c1c3-414c-84a7-c671526f8316/services/ogc/wfs?
    SERVICE=wfs&
    REQUEST=GetCapabilities&
    VERSION=1.0.0

KVP for DescribeFeatureType Request

DescribeFeatureType HTTP GET KVP request

Table 15 from OpenGIS Web Feature Service 2.0 Interface Standard - Panagiotis (Peter) A. Vretanos, editor - 2010-11-02

Table 15 from OpenGIS Web Feature Service 2.0 Interface Standard - Panagiotis (Peter) A. Vretanos, editor - 2010-11-02

Sample DescribeFeatureType Requests

USGS Framework Layer (Governmental Units) WFS Service linked from the USGS TNM Access API page service list - Live Link

http://services.nationalmap.gov/arcgis/services/WFS/govunits/MapServer/WFSServer?
    version=1.1.0&
    request=DescribeFeatureType&
    service=WFS&
    typeName=WFS_govunits:State_or_Territory_High-res

Sample request to NM RGIS (NM 2010 Census Block Groups) - Live Link

http://gstore.unm.edu/apps/rgis/datasets/715663ba-c1c3-414c-84a7-c671526f8316/services/ogc/wfs?
    VERSION=1.0.0&
    SERVICE=wfs&
    REQUEST=DescribeFeatureType&
    TYPENAME=tl_2010_35_bg10

KVP for GetFeature Request

GetFeature HTTP GET KVP request

Table 17 from OpenGIS Web Feature Service 2.0 Interface Standard - Panagiotis (Peter) A. Vretanos, editor - 2010-11-02 

KVP for GetFeature Request - Presentation Parameters

Table 5 from OpenGIS Web Feature Service 2.0 Interface Standard - Panagiotis (Peter) A. Vretanos, editor - 2010-11-02 

KVP for GetFeature Request - Resolve Parameters

Table 6 from OpenGIS Web Feature Service 2.0 Interface Standard - Panagiotis (Peter) A. Vretanos, editor - 2010-11-02 

KVP for GetFeature Request - Ad-hoc Query Parameters (Figure )

Table 8 from OpenGIS Web Feature Service 2.0 Interface Standard - Panagiotis (Peter) A. Vretanos, editor - 2010-11-02 

KVP for GetFeature Request - Stored Query Parameters (Figure )

Table 10 from OpenGIS Web Feature Service 2.0 Interface Standard - Panagiotis (Peter) A. Vretanos, editor - 2010-11-02 

Sample GetFeature Requests

USGS Framework Layer (Governmental Units) WFS Service linked from the USGS TNM Access API page service list - Live Link

Note: TYPENAME for VERSION=1.1.0 instead of TYPENAMES for VERSION=2.0.0

http://services.nationalmap.gov/arcgis/services/WFS/govunits/MapServer/WFSServer?
    VERSION=1.1.0&
    REQUEST=GetFeature&
    SERVICE=WFS&
    TYPENAME=WFS_govunits:State_or_Territory_High-res

Alternative request (Live Link) that includes an OUTPUTFORMAT parameter

http://services.nationalmap.gov/arcgis/services/WFS/govunits/MapServer/WFSServer?
    VERSION=1.1.0&
    REQUEST=GetFeature&
    SERVICE=WFS&
    TYPENAME=WFS_govunits:State_or_Territory_High-res&
    OUTPUTFORMAT=text/xml;%20subType=gml/3.1.1/profiles/gmlsf/1.0.0/0

OGC Web Coverage Services

Background

The documents related to the OGC WCS standard are available from: [http://www.opengeospatial.org/standards/wcs][wcs] with the sample parameters in the following slides based upon the OGC Web Coverage Service 2.0 Interface Standard - KVP Protocol Binding Extension - Peter Baumann, editor - 2010-10-27

From the OGC WCS 2.0 Introduction

The OGC Web Coverage Service (WCS) supports electronic retrieval of geospatial data as "coverages" – that is, digital geospatial information representing space/time-varying phenomena.

This document specifies the WCS core; every implementation of a WCS shall adhere to this standard. This standard thus defines only basic requirements. Extensions to the core will define extensions to meet additional requirements, such as the response encoding. Indeed, additional extensions are required in order to completely specify a WCS for implementation.

A WCS provides access to coverage data in forms that are useful for client-side rendering, as input into scientific models, and for other clients. The WCS may be compared to the OGC Web Feature Service (WFS) and the Web Map Service (WMS). As WMS and WFS service instances, a WCS allows clients to choose portions of a server's information holdings based on spatial constraints and other query criteria.

WCS Requests/Operations

GetCapabilities
service metadata (XML) that documents the service, including brief information about the data coverages available from the service
DescribeCoverage
a request for more detailed metadata (XML) for one or more coverages listed in the output of the GetCapabilities request
GetCoverage
a request for an actual data product representing a specified coverage. The specific data formats available for delivery will vary from service to service.

Request Composition

Requests submitted to a WCS may be submitted either via the following protocols, as defined in the three extensions developed thus far for the core WCS standard.

HTTP GET
a request that includes all request parameters within the URL submitted to the service. Request parameters are included in the URL as “name=value” pairs. Extension Link
HTTP POST
a request where the URL consists of only the Host and path, with all other request parameters included in the body of the POST document submitted to the service. The request parameters supplied to the server are encoded as XML within the POST document. Extension Link
XML/SOAP
a request-response model between the client that conforms with the W3C SOAP web services protocol Extension Link

KVP for Base WCS Requests

Name Mandatory/Optional Definition Data Type
service M Identifier of the OGC service String, fixed to "WCS"
request M Request type name String, set to operation name
version M (except for GetCapabilities) Request protocol version String

Sample WCS GetCapabilities requests

NOAA Global Forecast System THREDDS catalog. Live Link

http://nomads.ncdc.noaa.gov/thredds/wcs/gfs-004/201602/20160228/
    gfs_4_20160228_0000_384.grb2?
    service=WCS&
    version=1.0.0&
    request=GetCapabilities

New Mexico Resource Geographic Information System PRISM Precipitation Normals WCS Service. Live Link

http://gstore.unm.edu/apps/rgis/datasets/2ce10b57-3925-4971-b876-b6fc66d3cca2/services/ogc/wcs?
    SERVICE=wcs&
    REQUEST=GetCapabilities&
    VERSION=1.1.2

KVP for DescribeCoverage Request

DescribeCoverage HTTP GET KVP request (Figure 1)

Figure 1. Table 1 from OGC Web Coverage Service 2.0 Interface Standard - KVP Protocol Binding Extension - Peter Baumann, editor - 2010-10-27

Figure 1. Table 1 from OGC Web Coverage Service 2.0 Interface Standard - KVP Protocol Binding Extension - Peter Baumann, editor - 2010-10-27

Sample DescribeCoverage Request

NOAA Global Forecast System THREDDS catalog. Live Link

http://nomads.ncdc.noaa.gov/thredds/wcs/gfs-004/201602/20160228/
gfs_4_20160228_0000_384.grb2?
    service=WCS&
    version=1.0.0&
    request=DescribeCoverage&
    COVERAGE=Categorical_Rain

New Mexico Resource Geographic Information System PRISM Precipitation Normals WCS Service. Live Link

http://gstore.unm.edu/apps/rgis/datasets/2ce10b57-3925-4971-b876-b6fc66d3cca2/services/ogc/wcs?
    SERVICE=wcs&
    REQUEST=DescribeCoverage&
    VERSION=1.1.2&
    COVERAGE=us_ppt_1971_2000_11

KVP for GetCoverage Request

GetCoverage HTTP GET KVP request (Figure 1)

Table 2 from OGC Web Coverage Service 2.0 Interface Standard - KVP Protocol Binding Extension - Peter Baumann, editor - 2010-10-27

Table 2 from OGC Web Coverage Service 2.0 Interface Standard - KVP Protocol Binding Extension - Peter Baumann, editor - 2010-10-27

Subset Definition for GetCoverage Request

Subset definition for the GetCoverage HTTP GET KVP request

Requirement 7 from OGC Web Coverage Service 2.0 Interface Standard - KVP Protocol Binding Extension - Peter Baumann, editor - 2010-10-27

Requirement 7 from OGC Web Coverage Service 2.0 Interface Standard - KVP Protocol Binding Extension - Peter Baumann, editor - 2010-10-27

Example from the 2.0 specification:

http://www.myserver.org:port/path?
    service=WCS
    &version=2.0
    &request=GetCoverage
    &coverageId=C0002
    &subset=lon,http://www.opengis.net/def/crs/EPSG/0/4326(-71,47)
    &subset=lat,http://www.opengis.net/def/crs/EPSG/0/4326(-66,51)
    &subset=t,http://www.opengis.net/def/trs/ISO- 8601/0/Gregorian+UTC("2009-11-06T23:20:52Z")

Sample GetCoverage Request

New Mexico Resource Geographic Information System PRISM Precipitation Normals WCS Service. Live Link

http://gstore.unm.edu/apps/rgis/datasets/2ce10b57-3925-4971-b876-b6fc66d3cca2/services/ogc/wcs?
    SERVICE=wcs&
    REQUEST=GetCoverage&
    VERSION=1.1.2&
    COVERAGE=us_ppt_1971_2000_11&
    CRS=urn:ogc:def:crs:EPSG::4326&
    BBOX=24.0625,-125.02083333333,49.93749998965,-66.47916669008&
    FORMAT=image/tiff&
    WIDTH=2048&
    HEIGHT=905

Overview

OpenLayers Capabilities

Distinguishing Characteristics Between OpenLayers and Google Maps

Resources

OpenLayers Home Page

Application Programming Interface (API) Reference

Examples

Demonstrations and Examples

OpenLayers_01.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<html>

<head>
    <link rel="stylesheet" href="css/OpenLayers_01.css" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
        openlayers/4.0.1/ol.css" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.0.1/ol.js" 
        type="text/javascript"></script>
</head>

<body>
    <h1>This is a very simple OpenLayers 4 sample map page</h1>

    <div id='map'><!-- This is where the map will be displayed --></div>

    <!-- import the external Javascript file with the map configuration code -->
    <script src="js/OpenLayers_01.js" type="text/javascript"></script>
</body>

</html>

OpenLayers_01.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// OpenLayers_01.js

var myMap = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([-106.624083,35.08427]),
        zoom: 18
        })
    });

OpenLayers_01.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

/* OpenLayers_01.css */

body {
    width:100%;
    height:100%
}

#map,.map {
    width:600px;
    height:400px;
}

#map_selector li {
    cursor:pointer;
    width:350px;
}

#map_selector li:hover {
    background-color: yellow;
}



#map div.ol-viewport 
    div.ol-overlaycontainer-stopevent 
    div.ol-overviewmap.ol-unselectable.ol-control.ol-uncollapsible {
        top: 200px;
        bottom: 300px;
}

Demonstration and Examples - Online Resources

Next Week - Custom Features and WMS Layers

Overview

Map Object Options

A variety of strategies for constructing a new OpenLayers.Map object

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

// create a map with minimum required elements and default 
// options in an element with the id "map1"
var myMap = new ol.Map({
    target: 'map1',
    // a map without layers can be defined and in that case a map with no layers
    // will be rendered
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([-106.624083,35.08427]),
        zoom: 18
        })
    });


// create a map with options specified in a separate 'options' variable and
// included by reference in the code to create the new map object
var options = {
    // required options
    target:'map2',
    layers: ...,
    view: ...,
    
    // optional options - only include those that you need
    controls: ...,
    pixelRatio: ...,
    interactions: ...,
    keyboardEventTarget: ...,
    loadTilesWhileAnimating: ...,
    loadTilesWhileInteracting: ...,
    logo: ...,
    overlays: ...,
    renderer: ...   
};
var map = new ol.Map(options);

// map with non-default options - same as above but with a single argument
var map = new ol.Map({
    // required options
    target:'map2',
    layers: ...,
    view: ...,
    
    // optional options - only include those that you need
    controls: ...,
    pixelRatio: ...,
    interactions: ...,
    keyboardEventTarget: ...,
    loadTilesWhileAnimating: ...,
    loadTilesWhileInteracting: ...,
    logo: ...,
    overlays: ...,
    renderer: ...   
});

// the following commands can be executed to add, set or remove the layers in a map 
// after a map object has been created

map.addLayer(layer)
map.removeLayer(layer)
map.setLayerGroup(layerGroup)

// the view of a layer can be created or modified after the map object has been 
// created by using the following command

map.setView()

// the target DOM object for the map object can be set or changed using 
// the following command

map.setTarget

Layer Object Options

Layer Types and a subset of sources for each type

Common Pattern of Layer Object Creation (varies some depending upon the specific layer type)

1
2
3
4
5
6

var layer = new ol.layer.***({
    source: new ol.source.***({
        ...
    }),
    other options ...
})

Additional Map and Layer Object Functions & Events

Both Map and Layer Objects have a number of associated functions as well

WMS Layer Configuration

Some key issues to be aware of when using the two WMS supporting layers (ol.layer.Tile, and ol.layer.Image) and their associated WMS sources (ol.source.TileWMS and ol.source.ImageWMS respectively) include:

Sample WMS Layer Object Creation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

// OpenLayers_03_wms.js

///////////////////////////////////////////////////////////////////////////////
// define layer objects

var basemap_tiled = new ol.layer.Tile({
    source: new ol.source.TileWMS({
    url: 'https://basemap.nationalmap.gov/arcgis/services/USGSTopo/MapServer/WmsServer?',
      params: {
        LAYERS: 0,
        FORMAT: 'image/png',
        TRANSPARENT: true
      },
      attributions: [
        new ol.Attribution({
          html: 'Data provided by the <a href="http://basemap.nationalmap.gov">National Map</a>.'
        })
      ]
    })
})

var basemap_single = new ol.layer.Image({
    source: new ol.source.ImageWMS({
        url: 'https://basemap.nationalmap.gov/arcgis/services/USGSTopo/MapServer/WmsServer?',
        params: {
            LAYERS: 0,
            FORMAT: 'image/png',
            TRANSPARENT: true
        },
        attributions: [
            new ol.Attribution({
                html: 'Data provided by the <a href="http://basemap.nationalmap.gov">National Map</a>.'
            })
        ]
    })
})

var states_single = new ol.layer.Image({
    source: new ol.source.ImageWMS({
        attributions: new ol.Attribution({
            html: 'State Boundary Restructured - USGS, National Atlas Release 5-14-12'
        }),
        params: {'LAYERS':'global:statep010'},
        url: 'http://mapper.internetmapping.net:8081/geoserver/global/wms?',
        serverType: 'geoserver'
    })
})

var states_tiled = new ol.layer.Tile({
    source: new ol.source.TileWMS({
        attributions: new ol.Attribution({
            html: 'State Boundary Restructured - USGS, National Atlas Release 5-14-12'
        }),
        params: {'LAYERS':'global:statep010'},
        url: 'http://mapper.internetmapping.net:8081/geoserver/global/wms?',
        serverType: 'geoserver'
    })
})



///////////////////////////////////////////////////////////////////////////////
// create our base map objects 
var singleMap = new ol.Map({
    target: 'map_image',
    layers: [basemap_single,states_single], //[basemap_single,states_single]
    view: new ol.View({
        // the approximate geographic center of the continental US
        center: ol.proj.fromLonLat([-98.58,39.83]),
        zoom: 3,
        projection: 'EPSG:3857'
        })
    });


var tiledMap = new ol.Map({
    target: 'map_tiled',
    layers: [basemap_tiled,states_tiled], //[basemap_tiled,states_tiled]
    view: new ol.View({
        // the approximate geographic center of the continental US
        center: ol.proj.fromLonLat([-98.58,39.83]),
        zoom: 3,
        projection: 'EPSG:3857'
        })
    });
    
var mixedMap = new ol.Map({
    target: 'map_mixed',
    layers: [basemap_tiled,states_single], //[basemap_tiled,states_single]
    view: new ol.View({
        // the approximate geographic center of the continental US
        center: ol.proj.fromLonLat([-98.58,39.83]), 
        zoom: 3,
        projection: 'EPSG:3857'
        })
    });

///////////////////////////////////////////////////////////////////////////////

Example: HTML, Javascript

Vector Layer Configuration

Vector layers support

Sample Point Feature Object creation

1
2
3
4
5

var classroomCoord = [-106.624073,35.084280]
var officeCoord = [-106.624899,35.084506]

var classroomPoint = new ol.geom.Point(ol.proj.fromLonLat(classroomCoord, projection));
var officePoint = new ol.geom.Point(ol.proj.fromLonLat(officeCoord, projection));

Sample KML Layer Object creation with style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

///////////////////////////////////////////////////////////////////////////////
// define some styles

var block_color = [0,255,0,.1]
var block_line_color = [0,255,0,1]
var county_color = [124,124,255,.25]
var county_line_color = [124,124,255,1]

var county_style = new ol.style.Style({
    fill: new ol.style.Fill({
      color: county_color
    }),
    stroke: new ol.style.Stroke({
      color: county_line_color,
      width: 2
    }),
});

var block_style = new ol.style.Style({
    fill: new ol.style.Fill({
      color: block_color
    }),
    stroke: new ol.style.Stroke({
      color: block_line_color,
      width: 1
    }),
});
///////////////////////////////////////////////////////////////////////////////

// unstyled layers

var blocks_kml = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: 'https://s3.amazonaws.com/kkb-web/data/tl_2010_35001_tabblock10.kml',
        projection: projection,
        format: new ol.format.KML()
    })
})

var counties_kml = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: 'https://s3.amazonaws.com/kkb-web/data/2007fe_35_county00.kml',
        projection: projection,
        format: new ol.format.KML()
    })
})


// styled layers 

var counties_kml_styled = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: 'https://s3.amazonaws.com/kkb-web/data/2007fe_35_county00.kml',
        projection: projection,
        format: new ol.format.KML({
            extractStyles:false
        })
    }),
    style: county_style
})

var blocks_kml_styled = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: 'https://s3.amazonaws.com/kkb-web/data/tl_2010_35001_tabblock10.kml',
        projection: projection,
        format: new ol.format.KML({
            extractStyles:false
        })
    }),
    style: block_style
})

Example: HTML, Javascript

Overview

Quantum GIS (QGIS)

ArcGIS

Common Model

Based upon the results of a GetCapabilities request against a remote service. GetCapabilities request information provided as either:

Full GetCapabilities Request

NASA Earth Observations (NEO) Imagery WMS

http://neowms.sci.gsfc.nasa.gov/wms/wms?version=1.3.0&service=WMS&request=GetCapabilities

USGS Service Endpoints - http://services.nationalmap.gov/arcgis/services/USGSTopoLarge/MapServer/WMSServer?request=GetCapabilities&service=WMS

Base URL for GetCapabilities

NASA Earth Observations (NEO) Imagery WMS

http://neowms.sci.gsfc.nasa.gov/wms/wms?

USGS Service Endpoints - http://services.nationalmap.gov/arcgis/services/USGSTopoLarge/MapServer/WMSServer?

Quantum GIS (QGIS)

QGIS uses the Base URL approach for adding WMS, WFS or WCS layers to a project.

The General Process:

  1. Add service, or select existing service
  2. Connect to the service to retrieve the information from the GetCapabilities response for the service
  3. Select layer(s)
  4. Modify settings for layer(s)
  5. Add layer(s)

QGIS OGC Documentation

QGIS - Adding Services and Layers - start

OGC Options in the Add Layer menu options

OGC Options in the Add Layer menu options

OGC Options in the left-side icon list

OGC Options in the left-side icon list

You need to know the GetCapabilities request for the service you want to add, for example one of the USGS WMS services

http://services.nationalmap.gov/arcgis/services/USGSTopoLarge/MapServer/WMSServer?request=GetCapabilities&service=WMS

determine the base URL -

http://services.nationalmap.gov/arcgis/services/USGSTopoLarge/MapServer/WMSServer

in this case

If in doubt, check the information in the metadata

Select the layer type you would like to from "Layer" menu, or click the button in the interface to add a specific layer type.

QGIS - Adding Services and Layers - adding a service

Add a service to the list of services in the menu (if necessary - QGIS retains information about previously added services) by selecting the "New" option under the service list in the "Add Layer(s) from a Server" dialog

"Add Layer(s) from a Server" dialog

"Add Layer(s) from a Server" dialog

QGIS - Adding Services and Layers - adding connection information

Add the name, base URL and any additional information about the service to the connection dialog box

Connection dialog box

Connection dialog box

QGIS - Adding Services and Layers - connecting to and adding layers from the service

After adding the service, you can select it from the service list in the "Add Layer(s) from a Server" dialog box, connect to the service to retrieve the GetCapabilities response from the service, select the layers and other options advertised by the service through its response, and add them to your map.

"Add Layer(s) from a Server" dialog with service connection and layer selection process

"Add Layer(s) from a Server" dialog with service connection and layer selection process

QGIS - Adding Services and Layers - the final added layer

After adding the layer, it appears as an available layer in the table of contents for your map.

QGIS map with added WMS layer in the TOC

QGIS map with added WMS layer in the TOC

QGIS Demonstration with WMS, WFS and WCS Services

WMS, WFS and WCS in QGIS

Example

ArcGIS

Based upon the results of a GetCapabilities request against a remote service. GetCapabilities request information provided as either:

This model applies to ArcGIS just as it did for Quantum GIS - the base URL is provided to the various ArcGIS components that support the addition of OGC services to the client interface.

ArcGIS OGC Support Documentation

ArcGIS WMS and WCS Configuration

The addition of OGC WMS and WCS layers to ArcMap is through the same process of

ArcGIS WMS and WCS Configuration Resources

ESRI Documentation

ESRI Documentation

ArcGIS WFS Configuration

ArcGIS WFS Configuration Resources

ESRI Documentation

ESRI Documentation

Conclusions

Overview

SOA Review

SOA Illustration

SOA Illustration

Server Platform

In the context of server platforms for online mapping with OGC services, there are several components that are of interest

Online Mapping Server Applications

Sample Commercial Off-the-Shelf (COTS)

Sample Open Source

What is GeoServer

GeoServer is an Open Source, Open Standards supporting geospatial web services platform

Working with GeoServer

OS-Independent Binaries are Available for Multiple Platforms (these are just ‘run’ to start the server)

GeoServer may be integrated into existing Java web servlet applications (such as Apache Tomcat) using the available Web Archive (WAR) file.

OS-Specific Installers are also Available

[Installation Information] (http://docs.geoserver.org/stable/en/user/installation/)

What is Happening Behind the Scenes

Interaction Between GeoServer Components

Interaction Between GeoServer Components

Setup and Configuration

Server Configuration Options

Geoserver Configuration Menu

Geoserver Configuration Menu

WxS Service Configuration Options

Geoserver Service Configuration Menu

Geoserver Service Configuration Menu

Options Common to all WxS services

Options specific to individual services

Data Component Configuration Options

GeoServer Data Configuration Menu

GeoServer Data Configuration Menu

Data Integration Process

Data integration workflow

Data integration workflow

Security Settings

GeoServer Security Configuration Menu

GeoServer Security Configuration Menu

Demonstration of GeoServer Interface

Class GeoServer Instance

GeoServer Home Page

GeoServer Home Page

Module 5 - OGC Services and Styling in GeoServer

Overview

OGC Styled Layer Descriptor (SLD)

OGC Styled Layer Descriptor (SLD)

Definition of Styles

Styles are XML documents that conform to the OGC SLD standard, and consist of four major components

Symbolizers
SLD components that define the rendering style of specific types of content
Labels
Defining the placement of labels
Filters
Allow for the application different symbolizers to defined sets of features
Scale Elements
Allow for the application of different symbolizers at different map scales through the definition of styling rules

Definition of Styles - Header Content

<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0" 
  xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" 
  xmlns="http://www.opengis.net/sld" 
  xmlns:ogc="http://www.opengis.net/ogc" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

one or more <NamedLayer> ...  </NamedLayer> elements

</StyledLayerDescriptor>

Definition of Styles - Sample SLD File

<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0" 
  xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" 
  xmlns="http://www.opengis.net/sld" 
  xmlns:ogc="http://www.opengis.net/ogc" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <NamedLayer>
    <Name>Simple Point</Name>
    <UserStyle>
      <Title>SLD Cook Book: Simple Point With Stroke</Title>
      <FeatureTypeStyle>
        <Rule>
          <PointSymbolizer>
            <Graphic>
              <Mark>
                <WellKnownName>circle</WellKnownName>
                <Fill>
                  <CssParameter name="fill">#FF0000</CssParameter>
                </Fill>
              </Mark>
              <Size>6</Size>
            </Graphic>
          </PointSymbolizer>
        </Rule>
      </FeatureTypeStyle>
    </UserStyle>
  </NamedLayer>
</StyledLayerDescriptor>

Simple GeoServer Point Style

Sample simple styled point layer

Sample simple styled point layer

SLD Snippet (Full SLD)

<NamedLayer>
  <Name>Simple Point</Name>
  <UserStyle>
    <Title>SLD Cook Book: Simple Point With Stroke</Title>
    <FeatureTypeStyle>
      <Rule>
        <PointSymbolizer>
          <Graphic>
            <Mark>
              <WellKnownName>circle</WellKnownName>
              <Fill>
                <CssParameter name="fill">#FF0000</CssParameter>
              </Fill>
            </Mark>
            <Size>6</Size>
          </Graphic>
        </PointSymbolizer>
      </Rule>
    </FeatureTypeStyle>
  </UserStyle>
</NamedLayer>

Simple GeoServer Line Style

Sample simple styled line layer

Sample simple styled line layer

SLD Snippet (Full SLD)

<NamedLayer>
  <Name>Simple Line</Name>
  <UserStyle>
    <Title>SLD Cook Book: Simple Line</Title>
    <FeatureTypeStyle>
      <Rule>
        <LineSymbolizer>
          <Stroke>
            <CssParameter name="stroke">#000000</CssParameter>
            <CssParameter name="stroke-width">3</CssParameter>    
          </Stroke>
        </LineSymbolizer>
      </Rule>
    </FeatureTypeStyle>
  </UserStyle>
</NamedLayer>

Simple GeoServer Polygon Style

Sample simple styled polygon layer

Sample simple styled polygon layer

SLD Snippet (Full SLD)

<NamedLayer>
  <Name>Simple polygon</Name>
  <UserStyle>
    <Title>SLD Cook Book: Simple polygon</Title>
    <FeatureTypeStyle>
      <Rule>
        <PolygonSymbolizer>
          <Fill>
            <CssParameter name="fill">#000080</CssParameter>
          </Fill>
        </PolygonSymbolizer>
      </Rule>
    </FeatureTypeStyle>
  </UserStyle>
</NamedLayer>

Simple GeoServer Raster Style

Sample simple styled raster layer

Sample simple styled raster layer

SLD Snippet (Full SLD)

<NamedLayer>
  <Name>Two color gradient</Name>
  <UserStyle>
    <Title>SLD Cook Book: Two color gradient</Title>
      <FeatureTypeStyle>
        <Rule>
          <RasterSymbolizer>
            <ColorMap>
              <ColorMapEntry color="#008000" 
                quantity="70" />
              <ColorMapEntry color="#663333" 
                quantity="256" />
            </ColorMap>
          </RasterSymbolizer>
        </Rule>
      </FeatureTypeStyle>
  </UserStyle>
</NamedLayer>

PointSymbolizer

<Graphic>
  <ExternalGraphic>
    <OnlineResource> (Required)
    <Format>
  <Mark>
    <WellKnownName> (Required)
    <Fill>
    <Stroke>
    <Opacity>
    <Size>
    <Rotation>

LineSybolizer

<Stroke>
  <GraphicFill>
    <Graphic> contents same as PointSymbolizer
  <GraphicStroke>
    <Graphic> contents same as PointSymbolizer
  <CssParameter name="...">
    name="stroke"
    name="stroke-width"
    name="stroke-opacity"
    name="stroke-linejoin"
    name="stroke-linecap"
    name="stroke-dasharray"
    name="stroke-dashoffset"

PolygonSymbolizer

<Fill>
  <GraphicFill>
    <Graphic> contents same as PointSymbolizer
  <CssParameter name="...">
    name="fill"
    name="fill-opacity"
  <Stroke> same as the LineSymbolizer

Raster Symbolizer

<Opacity>
<ColorMap type="ramp | values | intervals" extended="true | false">
  <ColorMapEntry color="" quantity="" label="" opacity=""/>
<ChannelSelection>
  <RedChannel> <GreenChannel> <BlueChannel>
    <SourceChannelName>
  <GrayChannel>
    <SourceChannelName>
<ContrastEnhancement>
<ShadedRelief> (not implemented in ver 2.0)
<OverlapBehavior> (not implemented in ver 2.0)
<ImageOutline> (not implemented in ver 2.0)

Filters

SLD Filter Rules and Vector Symbolization

Filters based upon Attribute Values

<PropertyIsEqualTo>
<PropertyIsNotEqualTo>
<PropertyIsLessThan>
<PropertyIsLessThanOrEqualTo>
<PropertyIsGreaterThan>
<PropertyIsGreaterThanOrEqualTo>
<PropertyIsBetween>

Logical Filters - for combining multiple filters

<And>
<Or>
<Not>

Spatial Filters

<Intersects>
<Equals>
<Disjoint>
<Within>
<Overlaps>
<Crosses>
<DWithin>
<Beyond>
<Distance>

Scale-based selection

<MaxScaleDenominator>
<MinScaleDenominator>

Attribute Filter Example

To define an Attribute Filter you need to know both the Attribute Name of the layer(s) that will use the filter and the value(s) of that field that will be used for the filter. How do you determine the attribute name and values?

For example:

ogrinfo -fields=YES -geom=NO kb_gpsrdsdd.shp kb_gpsrdsdd

Where this command requests that the fields and their values be displayed, but that the detailed geometry information (i.e. all of the nodes associated with each feature) be suppressed in the output

Full SLD

<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0" 
  xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" 
  xmlns="http://www.opengis.net/sld" 
  xmlns:ogc="http://www.opengis.net/ogc" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

<!-- New Mexico Highways -->
<NamedLayer>
<Name>NM Roads</Name>
  <UserStyle>
    <Name>NM Roads</Name>
    <FeatureTypeStyle>
        <Rule>
          <Title>NM Highways</Title>
          <ogc:Filter>
            <ogc:PropertyIsEqualTo>
              <ogc:PropertyName>TYPE</ogc:PropertyName>
              <ogc:Literal>State Highway</ogc:Literal>
            </ogc:PropertyIsEqualTo>
          </ogc:Filter>
          <LineSymbolizer>
            <Stroke>
              <CssParameter name="stroke">
                <ogc:Literal>#CCCCCC</ogc:Literal>
              </CssParameter>
              <CssParameter name="stroke-width">
                <ogc:Literal>2</ogc:Literal>
              </CssParameter>
            </Stroke>
          </LineSymbolizer>
        </Rule>

<!-- US Highways -->
        <Rule>
            <Title>US Highways</Title>
            <ogc:Filter>
            <ogc:PropertyIsEqualTo>
                <ogc:PropertyName>TYPE</ogc:PropertyName>
                <ogc:Literal>US Highway</ogc:Literal>
            </ogc:PropertyIsEqualTo>
            </ogc:Filter>
            <LineSymbolizer>
            <Stroke>
              <CssParameter name="stroke">
                <ogc:Literal>#ff0000</ogc:Literal>
              </CssParameter>
              <CssParameter name="stroke-width">
                <ogc:Literal>3</ogc:Literal>
              </CssParameter>
            </Stroke>
            </LineSymbolizer>
            <LineSymbolizer>
            <Stroke>
              <CssParameter name="stroke">
                <ogc:Literal>#CCCCCC</ogc:Literal>
              </CssParameter>
              <CssParameter name="stroke-width">
                <ogc:Literal>1</ogc:Literal>
              </CssParameter>
            </Stroke>
            </LineSymbolizer>
        </Rule>

<!-- Interstate Highways -->
        <Rule>
          <Title>Interstates</Title>
          <ogc:Filter>
            <ogc:PropertyIsEqualTo>
              <ogc:PropertyName>TYPE</ogc:PropertyName>
              <ogc:Literal>Interstate</ogc:Literal>
            </ogc:PropertyIsEqualTo>
          </ogc:Filter>
          <LineSymbolizer>
            <Stroke>
              <CssParameter name="stroke">
                <ogc:Literal>#fcff00</ogc:Literal>
              </CssParameter>
              <CssParameter name="stroke-width">
                <ogc:Literal>5</ogc:Literal>
              </CssParameter>
            </Stroke>
          </LineSymbolizer>
          <LineSymbolizer>
            <Stroke>
              <CssParameter name="stroke">
                <ogc:Literal>#222222</ogc:Literal>
              </CssParameter>
              <CssParameter name="stroke-width">
                <ogc:Literal>3</ogc:Literal>
              </CssParameter>
            </Stroke>
          </LineSymbolizer>
        </Rule>
    </FeatureTypeStyle>
  </UserStyle>
</NamedLayer>

</StyledLayerDescriptor>

Attribute Filter with Scale Factor

The only change needed to introduce scale-dependencies into styles is to include <MaxScaleDenominator> or <MinScaleDenominator> elements within a rule where they should be applied. These elements should be placed just before the symbolizer element so that GeoServer can properly validate the provided SLD.

Full SLD 

<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0" 
  xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" 
  xmlns="http://www.opengis.net/sld" 
  xmlns:ogc="http://www.opengis.net/ogc" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

<!-- New Mexico Highways -->
<NamedLayer>
<Name>NM Roads</Name>
  <UserStyle>
    <Name>NM Roads</Name>
    <FeatureTypeStyle>
        <Rule>
          <Title>NM Highways</Title>
          <ogc:Filter>
            <ogc:PropertyIsEqualTo>
              <ogc:PropertyName>TYPE</ogc:PropertyName>
              <ogc:Literal>State Highway</ogc:Literal>
            </ogc:PropertyIsEqualTo>
          </ogc:Filter>
          <MaxScaleDenominator>1000000</MaxScaleDenominator>
          <LineSymbolizer>
            <Stroke>
              <CssParameter name="stroke">
                <ogc:Literal>#CCCCCC</ogc:Literal>
              </CssParameter>
              <CssParameter name="stroke-width">
                <ogc:Literal>2</ogc:Literal>
              </CssParameter>
            </Stroke>
          </LineSymbolizer>
        </Rule>

<!-- US Highways -->
        <Rule>
            <Title>US Highways</Title>
            <ogc:Filter>
            <ogc:PropertyIsEqualTo>
                <ogc:PropertyName>TYPE</ogc:PropertyName>
                <ogc:Literal>US Highway</ogc:Literal>
            </ogc:PropertyIsEqualTo>
            </ogc:Filter>
            <MaxScaleDenominator>5000000</MaxScaleDenominator>
            <LineSymbolizer>
            <Stroke>
              <CssParameter name="stroke">
                <ogc:Literal>#ff0000</ogc:Literal>
              </CssParameter>
              <CssParameter name="stroke-width">
                <ogc:Literal>3</ogc:Literal>
              </CssParameter>
            </Stroke>
            </LineSymbolizer>
            <LineSymbolizer>
            <Stroke>
              <CssParameter name="stroke">
                <ogc:Literal>#CCCCCC</ogc:Literal>
              </CssParameter>
              <CssParameter name="stroke-width">
                <ogc:Literal>1</ogc:Literal>
              </CssParameter>
            </Stroke>
            </LineSymbolizer>
        </Rule>

<!-- Interstate Highways -->
        <Rule>
          <Title>Interstates</Title>
          <ogc:Filter>
            <ogc:PropertyIsEqualTo>
              <ogc:PropertyName>TYPE</ogc:PropertyName>
              <ogc:Literal>Interstate</ogc:Literal>
            </ogc:PropertyIsEqualTo>
          </ogc:Filter>
          <LineSymbolizer>
            <Stroke>
              <CssParameter name="stroke">
                <ogc:Literal>#fcff00</ogc:Literal>
              </CssParameter>
              <CssParameter name="stroke-width">
                <ogc:Literal>5</ogc:Literal>
              </CssParameter>
            </Stroke>
          </LineSymbolizer>
          <LineSymbolizer>
            <Stroke>
              <CssParameter name="stroke">
                <ogc:Literal>#222222</ogc:Literal>
              </CssParameter>
              <CssParameter name="stroke-width">
                <ogc:Literal>3</ogc:Literal>
              </CssParameter>
            </Stroke>
          </LineSymbolizer>
        </Rule>
    </FeatureTypeStyle>
  </UserStyle>
</NamedLayer>

</StyledLayerDescriptor>

Demonstrations

Class GeoServer Instance: http://geog485.unm.edu:8080/geoserver/web/

SLD Creation Using QGIS: Link to the QGIS Vector Properties Dialog Documentation.

Module 5 - OGC Services and Styling in GeoServer

Overview

Raster Symbolizer - Review

<Opacity>
<ColorMap type=ramp|values|intervals extended=true|false />
  <ColorMapEntry color="" quantity="" label="" opacity=""/>
<ChannelSelection>
  <RedChannel> <GreenChannel> <BlueChannel>
    <SourceChannelName>
  <GrayChannel>
    <SourceChannelName>
<ContrastEnhancement>
<ShadedRelief> (not implemented in ver 2.0)
<OverlapBehavior> (not implemented in ver 2.0)
<ImageOutline> (not implemented in ver 2.0)

Sample Raster SLD for Color Map Examples

<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0" 
  xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" 
  xmlns="http://www.opengis.net/sld" 
  xmlns:ogc="http://www.opengis.net/ogc" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

<NamedLayer>
<Name>ElevationData</Name>
  <UserStyle>
    <Name>dem</Name>
    <Title>Simple DEM style</Title>
    <Abstract>Classic elevation color progression</Abstract>
    <FeatureTypeStyle>
      <Rule>
        <RasterSymbolizer>
          <Opacity>1.0</Opacity>
          <ColorMap>
            <ColorMapEntry color="#000000" quantity="-500" label="nodata" opacity="0.0" />
            <ColorMapEntry color="#AAFFAA" quantity="0" label="0" />
            <ColorMapEntry color="#00FF00" quantity="1000" label="1000"/>
            <ColorMapEntry color="#FFFF00" quantity="1200" label="1200" />
            <ColorMapEntry color="#FF7F00" quantity="1400" label="1400" />
            <ColorMapEntry color="#BF7F3F" quantity="1600" label="1600" />
            <ColorMapEntry color="#99CC66" quantity="2000" label="2000" />
            <ColorMapEntry color="#336633" quantity="2500" label="2500" />
            <ColorMapEntry color="#006600" quantity="3000" label="3000" />
            <ColorMapEntry color="#FFFFFF" quantity="3500" label="3500" />
          </ColorMap>
        </RasterSymbolizer>
      </Rule>
    </FeatureTypeStyle>
  </UserStyle>


</NamedLayer>
</StyledLayerDescriptor>

ColorMap Types

<ColorMap> or <ColorMap type="ramp">

<ColorMap type="intervals">

<ColorMap type="values">

Extend or Not To Extend?

<ColorMap type="ramp" extended="false">  = 256 colors in ramp (default)
<ColorMap type="ramp" extended="true"> = 65536 colors in ramp

Opacity

Options for defining opacity appear in two places in the raster symbolizer.

At the level of the entire raster dataset

<Opacity>0.5</Opacity>

Within a ColorMapEntry for a specific color definition within a ColorMap

<ColorMap>
   <ColorMapEntry color="#000000" quantity="-500" label="nodata" opacity="0.0" />
   <ColorMapEntry color="#AAFFAA" quantity="0" label="0" />
   <ColorMapEntry color="#00FF00" quantity="1000" label="1000"/>
   ...
   <ColorMapEntry color="#FFFFFF" quantity="3500" label="3500" />
</ColorMap>

Channel Selection

Many raster datasets contain multiple bands of values which may be viewed individually or assigned to the colors red, green, and blue to generate a color image representing a combination of band values. GeoServer allows for the specification of a single band for display as a GrayChannel or three bands as RedChannel, GreenChannel, and BlueChannel.

<?xml version="1.0" encoding="ISO-8859-1"?>
<StyledLayerDescriptor version="1.0.0" 
  xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" 
  xmlns="http://www.opengis.net/sld" 
  xmlns:ogc="http://www.opengis.net/ogc" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

<NamedLayer>
<Name>DOQQBands</Name>
  <UserStyle>
    <Name>DOQQ321</Name>
    <Title>Simple DEM style</Title>
    <Abstract>Classic elevation color progression</Abstract>
    <FeatureTypeStyle>
      <Rule>
        <RasterSymbolizer>
         <ChannelSelection>
          <RedChannel>
            <SourceChannelName>3</SourceChannelName>
          </RedChannel>
          <GreenChannel>
            <SourceChannelName>2</SourceChannelName>
          </GreenChannel>
          <BlueChannel>
            <SourceChannelName>1</SourceChannelName>
          </BlueChannel>
         </ChannelSelection>
        </RasterSymbolizer>
      </Rule>
    </FeatureTypeStyle>
  </UserStyle>


</NamedLayer>
</StyledLayerDescriptor>

Contrast Enhancement

Some raster data may need adjustment to increase the contrast (the range between the darkest and lightest values) displayed. GeoServer provides three options for contrast enhancement, each of which have a different effect on the resulting image.

Histogram
The values are stretched so that an equal number of pixels fall into each color in the range
Normalize
The minimum and maximum brightness values are mapped to the minimum and maximum raster values
Gamma
The image is brightened or darkened by a specified factor (negative numbers darken, positive numbers brighten)

Sample Contrast Enhancement SLD for Examples

<RasterSymbolizer>
  <Opacity>1.0</Opacity>
  <ChannelSelection>
    <RedChannel>
      <SourceChannelName>1</SourceChannelName>
      <ContrastEnhancement>
      <Histogram/>
      </ContrastEnhancement>
    </RedChannel>
    <GreenChannel>
      <SourceChannelName>2</SourceChannelName>
      <ContrastEnhancement>
      <Histogram/>
      </ContrastEnhancement>
    </GreenChannel>
    <BlueChannel>
      <SourceChannelName>3</SourceChannelName>
      <ContrastEnhancement>
      <Histogram/>
      </ContrastEnhancement>
    </BlueChannel>
  </ChannelSelection>
</RasterSymbolizer>
<ContrastEnhancement>
  <Normalize/>
</ContrastEnhancement>
<ContrastEnhancement>
  <Histogram/>
</ContrastEnhancement>
<ContrastEnhancement>
  <GammaValue>.5</GammaValue>
</ContrastEnhancement>

GeoServer Demo/Q&A

Class GeoServer Instance: http://geog485.unm.edu:8080/geoserver/web/

Epilogue - Geography 485L/585L Closing Comments and Next Steps

What We've Done ...

Whew!!! That's a bunch of work for 16 weeks. Good Job.

Where Do You Go From Here?

  1. A KMZ file may be extracted and its contents examined by many zipfile utilities if you replace the .kmz extension with .zip prior to trying to extract↩

Creative Commons License
This work by Karl Benedict is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.